<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交易查询</title>
    <link rel="stylesheet" href="/static/style.css">
    <style>
        .container { max-width: 900px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(45,140,240,0.10); padding: 30px 40px; }
        h2 { color: #2d8cf0; margin-bottom: 20px; }
        form { margin-bottom: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
        select, input[type="date"] { padding: 6px 10px; border-radius: 5px; border: 1px solid #d0d0d0; }
        button { background: #2d8cf0; color: #fff; border: none; padding: 7px 18px; border-radius: 5px; cursor: pointer; font-size: 15px; }
        button:hover { background: #1a6fb3; }
        table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
        th, td { padding: 12px 8px; text-align: center; background: #f7fafd; border-radius: 8px; }
        th { background: #eaf4fd; color: #2d8cf0; }
        tr:hover td { background: #f0f8ff; }
    </style>
</head>
<body>
    <div class="container">
        <h2>交易明细</h2>
        <form method="get">
            <label>银行卡：</label>
            <select name="card_id">
                <option value="">全部</option>
                {% for card in cards %}
                <option value="{{ card.cardID }}" {% if card.cardID == request.args.get('card_id','') %}selected{% endif %}>{{ card.cardID }}</option>
                {% endfor %}
            </select>
            <label>起始日期：</label>
            <input type="date" name="start_date" value="{{ request.args.get('start_date','') }}">
            <label>结束日期：</label>
            <input type="date" name="end_date" value="{{ request.args.get('end_date','') }}">
            <button type="submit">筛选</button>
        </form>
        <table>
            <tr>
                <th>卡号</th>
                <th>类型</th>
                <th>金额</th>
                <th>目标卡号</th>
                <th>时间</th>
            </tr>
            {% for tx in transactions %}
            <tr>
                <td>{{ tx.card_id }}</td>
                <td>
                    {% set type_map = {'deposit': '存款', 'withdraw': '取款', 'transfer': '转账'} %}
                    {{ type_map.get(tx.type, tx.type) }}
                </td>
                <td>{{ tx.amount }}</td>
                <td>{{ tx.target_card or '-' }}</td>
                <td>{{ tx.timestamp }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
</body>
</html> 